<script setup>
import router from "@/router/index.js";
import { ref, onMounted, computed } from 'vue'
import { Expand } from '@element-plus/icons-vue'
import routes from '@/router/routers.js' // 从routers.js中导入路由信息
const isCollapse = ref(true)
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}
const userPermissions = ['user', 'admin']; // 假设用户权限信息
const filteredRoutes = ref([]);
const routers = ref(routes); // 使用从routers.js导入的路由信息
const filterRouters = computed(() => {
  return routers.value.reduce((acc, route) => {
    if (route.meta && route.meta.permissions) {
      const hasPermission = userPermissions.some((permission) =>
          route.meta.permissions.includes(permission)
      );
      if (hasPermission) {
        acc.push(route);
      }
    }
    return acc;
  }, []);
});


onMounted(() => {
  filteredRoutes.value = filterRouters.value;
})
</script>
<template>
  <el-menu style="height: 100%"
           default-active="/home"
           router
           :collapse="isCollapse"
  >
    <el-button @click="toggleCollapse()" class="collapse-btn">
      <el-icon class="expand-icon">
        <Expand/>
      </el-icon>
    </el-button>
    <template v-for="(item, index) in filteredRoutes" :key="item.path">
      <!-- 如果路由有子路由 -->
      <!-- 如果路由没有子路由 -->
      <el-menu-item :index="item.path">
        <el-icon><component :is="item.meta.icon"/></el-icon>
        <span>{{item.meta.title}}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>
<style scoped>
.collapse-btn {
  border-radius: 4px;
  margin:15px 17px;
  background-color: #409EFF; /* 调整背景颜色 */
  color: white; /* 调整文字颜色 */
  border: none; /* 去掉边框 */
  padding: 8px; /* 调整内边距 */
}

.collapse-btn:hover {
  background-color: #66b1ff; /* 调整鼠标悬停时的背景颜色 */
}

.expand-icon {
  font-size: 1.2em; /* 调整图标大小 */
}

</style>
